<template>
    <div class="doctorreviewlist">
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <fourLevelLinkage
                        @changeProvince="changeProvince"
                        @changeCity="changeCity"
                        @changeArea="changeArea"
                        @changeHospital="changeHospital"
                        :province="province"
                        :city="city"
                        :area="area"
                        :hospital="hospital"
                        :isBack="isBack"
                    ></fourLevelLinkage>
                </div>
                <div class="margin-up-down" @click="getroom">
                    <span>科室:</span>
                    <Select class="w-select" clearable v-model="status">
                        <Option
                            v-for="(item,index) in statusList"
                            :value="index"
                            :key="index"
                            style='text-align:center'
                        >{{item.childDept}}</Option>
                    </Select>
                </div>
                <div class="margin-up-down">
                    <span>时间类型:</span>
                    <Select class="w-select" clearable v-model="ttype" >
                        <Option
                            v-for="(item,index) in timeList"
                            :value="index"
                            :key="index"
                            style='text-align:center'
                        >{{item}}</Option>
                    </Select>
                </div>
                <div class="margin-up-down">
                    <span>选择日期:</span>
                    <DatePicker
                        type="date"
                        :clearable="false"
                        @on-change="changeStart"
                        v-model="startDate"
                        placeholder="开始日期"
                        format="yyyy-MM-dd"
                        style="width: 120px"
                    ></DatePicker>
                    <span style="margin:0 5px">至</span>
                    <DatePicker
                        type="date"
                        :clearable="false"
                        @on-change="changeEnd"
                        v-model="endDate"
                        placeholder="结束日期"
                        format="yyyy-MM-dd"
                        style="width: 120px"
                    ></DatePicker>
                </div>
                <div class="margin-up-down">
                    <Input class="w-input" v-model="searchKey" placeholder="关键字"/>                                    
                </div>
                <div class="margin-up-down">
                    <Button type="primary" @click="loadPage(1)" style="background-color: #5362e1; border: none;">
                        <Icon type="ios-search" size="14"/>查询
                    </Button>
                </div>
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="orderList" @on-selection-change="mySelectRow"></Table>
        <Page :total="count" :current="pageNo" :page-size="pageSize" @on-change="loadPage" style='margin-top:10px;text-align:center;'/>
        <div class="mask" v-if="show==true" ></div>
        <Modal v-model="modal1" title="门诊全流程闭环服务日志" z-index:99999 footer-hide @on-cancel="cancel" >
            <iframe id="one" :src="src+openid+'&page=1&memberId='+memberId+'&id='+outpatientId+'&time='+time+'&doc='+doctor+'&room='+room+'&hid='+hospitalId+'#/'" frameborder="0" style='height:1000px;width:475px'></iframe>
        </Modal>
    </div>
</template>
<script>
import { DatePicker } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import api from "@/api/commonApi";
import code from "@/configs/base.js";
export default { 
    data() {
        return {
            // src:'https://fsyydata2.vmserver.cn/process/?openid=',
            src:'https://hospital.hbmtyl.com/process/?openid=',
            openid:'o_OV6swMyeE3L86r6uYi2W46wQ-E',
            memberId:'',
            hospitalId:'',
            outpatientId:'',
            time:'',
            doctor:'',
            add:'',
            room:'',
            show:false,
            modal1: false,
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 1,
            searchKey: "",
            ttype: "",//时间类型
            status: "",//科室
            ostatus: "",
            startDate: "",
            endDate: "",
            //medicine科室接口
            statusList: [],
            // // 所选科室
            // info:{
            //     depantmentName:"",
            //     depantment:""
            // },
            // statusList: ["全部", "普通内科", "呼吸内科", "外科"],
            timeList: ['预约时间','就诊时间'],
            doctorList: [],
            orderList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            // 条件搜索查询科室
            deptmentValue:"",
            deptmentList:[],
            timeStatus: 4,
            selectTimeStatus: 1,
            columns: [
                { type: "index", title: "排序", width: 60, align: "center" },
                { title: "门诊流水号", key: "outpatientId", align: "center" },
                { title: "姓名", key: "memberName", align: "center" },
                { title: "性别", key: "gender", align: "center",
                    render: (h, params) => {
                        let status = params.row.gender;
                        switch (parseInt(status)) {
                        case 1:
                            return '男'
                        case 2:
                            return '女'
                        case 9:
                            return '其他'
                        }
                    }
                },
                { title: "年龄", key: "age", align: "center" },
                {title: "预约时间",key: "appointmentTime",align: "center", width: 200},
                { title: "就诊科室", key: "department", align: "center" },
                {title: "就诊医生",key: "doctorName",align: "center"},
                {title: "就诊时间",key: "visiTime",align: "center", width: 200},
                { title: "就诊机构", key: "hospitalName", align: "center" },
                {title: "当前完成业务",key: "reservationType",width: 200,align: "center",
                    render: (h, params) => {
                        let status = params.row.reservationType;
                        switch (parseInt(status)) {
                        case 1:
                            return '预约挂号 '
                        case 2:
                            return '检查检验预约'
                        case 3:
                            return '报到候诊'
                        case 4:
                            return '医生接诊'
                        case 5:
                            return '诊间缴费'
                        case 6:
                            return '报告查询'
                        case 7:
                            return '处方取药'
                        case 8:
                            return '服务评价'
                        }
                    }
                },
                {title: "操作",key: "go",align: "center",
                    render: (h, params) => {
                        return h("div", [
                        h(
                            "Button",
                            {
                            props: {
                                type: "primary",
                                size: "small"
                            },
                            style: {
                                margin: "0px 6px"
                            },
                            on: {
                                click: () => {
                                this.handleDetail(params);
                                }
                            }
                            },
                            "详情 "
                        )
                        ]);
                    },
                },
            ],
        };
    },
    components: {
        DatePicker,
        fourLevelLinkage
    },
    created() {
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        
    },
    mounted() {
        this.loadPage(1);
        // this.loadingDepartment();
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
            // this.loadingDepartment();
        },
        changeStart(val) {
            this.startDate = val;
        },
        changeEnd(val) {
            this.endDate = val;
        },
        cancel () {
            // this.$Message.info('Clicked cancel');
            this.show=false
            this.modal1=false
        },
        // 院内科室
        getroom(val) {
            console.log('1')
            this.statusList = []
            if(!Boolean(this.hospital)) {
                this.$Message.error("请先选择医院后再查询科室");
                return ""
            }else{
                let params = {
                    hospitalId: this.hospital,
                    pageNo:1,
                    pageSize: 10,
                };
                this.$axios
                    .post(api.medicine, params)
                    .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.statusList = ret.list
                        console.log(ret);
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        },
        changeshow(){
            this.show=false
        },
        handleDetail(params){//详情
            console.log(params)
            if(params.row.openid){
                this.show=true
                this.modal1=true
                this.openid=params.row.openid
                this.memberId=params.row.memberId
                this.time=params.row.appointmentTime//时间
                this.doctor=encodeURI(encodeURI(params.row.doctorName))//医生姓名
                this.room=encodeURI(encodeURI(params.row.department))//科室
                // this.add=params.row.inpatientArea//病区
                this.outpatientId=params.row.outpatientId
                this.hospitalId=params.row.hospitalId
                let data = {
                    outpatientId: params.row.outpatientId,
                };
                    this.$axios
                        .post(api.outpatientdetails, data)
                        .then(res => {
                        if (res.data.code) {
                            let ret = res.data.object;
                            // this.statusList = ret.list
                            console.log(ret);
                        }
                    }).catch(err => {
                        console.log(err);
                    });
            } 
            else {
                this.$Message.info("此订单为APP预约挂号，不展示门诊全流程详情")
            }          
        },
        // 选中的列表数据
        mySelectRow (selection) {
            // selection已选择的数据
            this.SelectList = selection;
            if(this.SelectList.length > 0) {
                this.hospitalId = this.SelectList[0].hospitalId
            } else {
                this.hospitalId = ""
            }
            console.log(this.SelectList);
        },
        //outpatientprocess接口
        //加载列表数据
        loadPage(pageNo) {
            console.log(this.startDate)
            this.pageNo = pageNo;
            var params = {};
            // console.log(this.ttype)
            if(this.ttype===0){
                params.timeType = 1//预约时间1，就诊时间2
            }else if(this.ttype==1){
                params.timeType = 2//预约时间1，就诊时间2
            }else{
                params.timeType = ''//预约时间1，就诊时间2
            }
            params.province = this.province ? this.province : null;
            params.city = this.city ? this.city : null;
            params.area = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.dictType = this.status//科室
            if(this.status==''){
                params.dictType = null
            }else{
                this.statusList.forEach((item ,index)=> {
                    if(this.status == index) {
                        params.dictType = item.childType
                    }
                })
            }
            
            params.keyWord = this.searchKey.trim() ? this.searchKey.trim() : null//关键字
            let startDate = new Date(this.startDate);
            let endDate = new Date(this.endDate);
            startDate = startDate.toLocaleDateString().replace(/\//g, "-");
            endDate = endDate.toLocaleDateString().replace(/\//g, "-");
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            if(this.startDate==''){
                params.startTime = ''
                params.endTime = ''
            }else{
                params.startTime = startDate
                params.endTime = endDate
            }
            this.orderList=[]
            // console.log("预约挂号订单 params", params);
            this.$axios.post(api.outpatientprocess,params).then(resp => {
                    if (resp.data.success) {
                        let tmpObj = resp.data.object;
                        this.count = tmpObj.count;
                        this.orderList = tmpObj.list;
                        // console.log(this.orderList[0].gender)
                        // for (let i = 0; i < this.orderList.length; i++) {
                        //     this.orderList[i].gender == this.orderList[i].gender == 1 ? "男" : "女"
                        // }
                    } else {
                        this.$Message.info("网络错误，请刷新重试");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
    }
};
</script>
<style lang="less" scoped>
.mask{
    background: rgba(70, 67, 67, 0.6);
    z-index: 999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
// .doctorreviewlist .ivu-modal .ivu-modal-content .ivu-modal-body {
//     height: 1000px;
// }
.doctorreviewlist {
    margin-left: 1%;
    padding: 10px;
    width: 98%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 140px;
    }
    .w-select-hos {
        width: 200px;
    }
    .w-input {
        width: 220px;
    }
    .w-num-input {
        width: 100px;
    }
    .m-table {
        margin: 10px 0;
    }
    .first {
        display: inline-block;
        min-width: 160px;
        text-align: left;
    }
    .second {
        display: inline-block;
        min-width: 500px;
        text-align: center;
    }
    .third {
        display: inline-block;
        min-width: 350px;
        text-align: center;
    }
    .fourth {
        display: inline-block;
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
        span{
            margin: 0 5px 010px;
        }
    }
}
</style>